<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>微信支付页</title>
    <link rel="icon" href="./img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/pay.css" />
</head>

<body>
    <!--head-->
    <div class="top">
        <div class="py-container">
            <div class="shortcut">
                <ul class="fl">
                    <li class="f-item">shop欢迎您！</li>
                    <li class="f-item">请登录　<span><a href="#">免费注册</a></span></li>
                </ul>
                <ul class="fr">
                    <li class="f-item">我的订单</li>
                    <li class="f-item space"></li>
                    <li class="f-item">我的shop</li>
                    <li class="f-item space"></li>
                    <li class="f-item">shop会员</li>
                    <li class="f-item space"></li>
                    <li class="f-item">企业采购</li>
                    <li class="f-item space"></li>
                    <li class="f-item">关注shop</li>
                    <li class="f-item space"></li>
                    <li class="f-item">客户服务</li>
                    <li class="f-item space"></li>
                    <li class="f-item">网站导航</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="cart py-container" id="app">
        <!--logoArea-->
        <div class="yui3-u Left logoArea">
        	<a class="logo-bd" title="shop" href="index.html" target="_blank"></a>
        </div>
        <!--主内容-->
        <div class="checkout py-container  pay">
            <div class="checkout-tit">
                <h4 class="fl tit-txt"><span class="success-icon"></span><span class="success-info">下单成功，请您及时付款！订单号：{{order.orderNumber}}</span></h4>
                <span class="fr"><em class="sui-lead">应付金额：</em><em  class="orange money">￥{{order.money}}</em>元</span>
                <div class="clearfix"></div>
            </div>
            <div class="checkout-steps">
                <div class="fl weixin">微信支付</div>
                <div class="fl sao mhsao">
                    <div class="fl code rcodebox">
                        <div class="rcode" id="qrcode">
						</div>
                        <div class="saosao">
                            <p>请使用微信扫一扫</p>
                            <p>扫描二维码支付</p>
                        </div>
                    </div>
                    <div class="fl phone phonebox">
							<img style="height: 550px;" src="img/wxp.png" />
                    </div>
                </div>
                <div class="clearfix"></div>
                <p><a href="pay.html" target="_blank">> 其他支付方式</a></p>
            </div>
        </div>

    </div>
    <!-- 底部栏位 -->
    <!--页面底部-->
    <div class="clearfix footer">
        <div class="py-container">
            <div class="footlink">
                <div class="Mod-service">
                    <ul class="Mod-Service-list">
                        <li class="grid-service-item intro  intro1">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                        <li class="grid-service-item  intro intro2">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                        <li class="grid-service-item intro  intro3">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                        <li class="grid-service-item  intro intro4">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                        <li class="grid-service-item intro intro5">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                    </ul>
                </div>
                <div class="clearfix Mod-list">
                    <div class="yui3-g">
                        <div class="yui3-u-1-6">
                            <h4>购物指南</h4>
                            <ul class="unstyled">
                                <li>购物流程</li>
                                <li>会员介绍</li>
                                <li>生活旅行/团购</li>
                                <li>常见问题</li>
                                <li>购物指南</li>
                            </ul>

                        </div>
                        <div class="yui3-u-1-6">
                            <h4>配送方式</h4>
                            <ul class="unstyled">
                                <li>上门自提</li>
                                <li>211限时达</li>
                                <li>配送服务查询</li>
                                <li>配送费收取标准</li>
                                <li>海外配送</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>支付方式</h4>
                            <ul class="unstyled">
                                <li>货到付款</li>
                                <li>在线支付</li>
                                <li>分期付款</li>
                                <li>邮局汇款</li>
                                <li>公司转账</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>售后服务</h4>
                            <ul class="unstyled">
                                <li>售后政策</li>
                                <li>价格保护</li>
                                <li>退款说明</li>
                                <li>返修/退换货</li>
                                <li>取消订单</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>特色服务</h4>
                            <ul class="unstyled">
                                <li>夺宝岛</li>
                                <li>DIY装机</li>
                                <li>延保服务</li>
                                <li>购物卡</li>
                                <li>会员充值卡</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>帮助中心</h4>
                            <ul class="unstyled">
                                <li>夺宝岛</li>
                                <li>DIY装机</li>
                                <li>延保服务</li>
                                <li>购物卡</li>
                                <li>会员充值卡</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="Mod-copyright">
                    <ul class="helpLink">
                        <li>关于我们<span class="space"></span></li>
                        <li>联系我们<span class="space"></span></li>
                        <li>关于我们<span class="space"></span></li>
                        <li>商家入驻<span class="space"></span></li>
                        <li>营销中心<span class="space"></span></li>
                        <li>友情链接<span class="space"></span></li>
                        <li>关于我们<span class="space"></span></li>
                        <li>营销中心<span class="space"></span></li>
                        <li>友情链接<span class="space"></span></li>
                        <li>关于我们</li>
                    </ul>
                    <p>Copyright©2017-2021 All Rights Reserved.</p>
                </div>
            </div>
        </div>
    </div>
    <!--页面底部END-->
	<!-- 引入组件库 -->
	<script src="js/vue.js"></script>
	<script src="js/axios.js"></script>
	<script src="js/qrcode.js"></script>
	<script>
		var app = new Vue({
			el:'#app',
			data(){
				return {
					order:{}
				}
			},
			created(){
				this.loadOrderInfo();
			},
			methods:{
				loadOrderInfo(){
					//获取ciptext
					let ciptext = this.queryParm('ciptext');
					//发送请求
					axios.get('http://localhost:8090/wx/pay?ciptext='+ciptext).then(function(resp){
						app.order = resp.data.data;
						//创建二维码
						let url = resp.data.data.code_url
						var qrcode = new QRCode('qrcode', {
							text: url,
							width: 228,
							height: 228,
							colorDark: '#000000',
							colorLight: '#ffffff',
							correctLevel: QRCode.CorrectLevel.H
						});
					
						// 使用 API
						qrcode.clear();
						qrcode.makeCode(url);
						
						//定时查询
						var interval = setInterval(() => {
							app.queryStatus();
						}, 2000)
					})
				},
				
				//查询支付状态
				queryStatus(){
					axios.get('http://localhost:8090/wx/result/'+this.order.orderNumber).then(function(resp){
						//状态
						if(resp.data.data.status===2){
							//支付成功
							location.href="success.html?money="+app.order.money;
						}
					});
				},
				
				//获取指定地址栏参数
				queryParm(variable)
				{
					   var query = window.location.search.substring(1);
					   var vars = query.split("&");
					   for (var i=0;i<vars.length;i++) {
							   var pair = vars[i].split("=");
							   if(pair[0] == variable){return pair[1];}
					   }
					   return(false);
				}
			},
			})
	</script>
</body>
</html>